import {createSlice} from '@reduxjs/toolkit'
import React from 'react'
import * as Icon from '@ant-design/icons'
// import { getMenus } from '@/store/mock/menus.js'

const iconToElement = (name) => React.createElement(Icon[name])

const menusStore = createSlice({
     name: 'menus',
     // 初始化state
     initialState: {
      menusList: []
     },
     // 修改状态的方法
     reducers: {
         getMenusList(state) {
            let menusList = [
               {
                 path: '/home',
                 name: 'home',
                 label: '首页',
                 icon: 'MenuFoldOutlined',
                 url: '/home/index'
               },
               {
                 path: '/mall',
                 name: 'mall',
                 label: '商品管理',
                 icon: 'MenuFoldOutlined',
                 url: '/mall/index'
               },
               {
                 path: '/user',
                 name: 'user',
                 label: '用户管理',
                 icon: 'MenuFoldOutlined',
                 url: '/user/index'
               }
           ]
           menusList.map(item => {
             item.icon = iconToElement(item.icon)
             item.key = item.path
           })
           state.menusList = menusList
           console.log('state.menusList', state.menusList)
            // return state.menusList = getMenus()
            // return new Promise(async resolve => {
            //    // 此处相当于请求了接口
            //    state.menusList = [
            //       {
            //         path: '/home',
            //         name: 'home',
            //         label: '首页',
            //         icon: 'HomeOutlined',
            //         url: '/home/index'
            //       },
            //       {
            //         path: '/mall',
            //         name: 'mall',
            //         label: '商品管理',
            //         icon: 'ShopOutLined',
            //         url: '/mall/index'
            //       },
            //       {
            //         path: '/user',
            //         name: 'user',
            //         label: '用户管理',
            //         icon: 'UserOutLined',
            //         url: '/user/index'
            //       }
            //   ]
            //    console.log('state.menusList', state.menusList)
            //    // collectPermissionCodes(this.menus)
            //    resolve(state.menusList)
            //  })
         }
     }
})

// 解构出来actionCreater函数
const {getMenusList} = menusStore.actions
// 获取reducer
const reducer = menusStore.reducer
// 以按需导出的方式导出actionCreater
export { getMenusList }
// 以默认导出的方式导出reducer
export default reducer